<template>
    <div class="list-content">
        <template  v-if="list&&list.length>0">
            <div v-for="(item, inedx) of list" :key="inedx">
                <div class="con-list">
                    <div class="line-label" :style="getStyle(item.workflow_info.color)">{{item.workflow_info.workflow_name}}</div>
                    <div>
                      <my-link @to="goto(item)">
                        {{ item.title }}
                      </my-link>
                    </div>
                    <div>
                        <div>
                            <p>{{ item.alias }}</p>
                            <p>{{ item.creator_name}}</p>
                            <p>{{ item.gmt_created }}</p>
                        </div>
                        <div>
                            <edit-button :hasPerms="true" icon="el-icon-edit" v-if="item.editable&&isTodo" @click="toHandle(item)"></edit-button>
                            <chuli-button :hasPerms="true" icon="el-icon-view" v-else-if="isTodo"  @click="toHandle(item)"></chuli-button>
                            <detail-button :hasPerms="true" icon="el-icon-view" v-else  @click="toHandle(item)"></detail-button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div v-else>
            <el-empty description="暂无内容" :image-size="80"></el-empty>
        </div>
        <all-detail-dialog :info="currRow" :visible.sync="visible" v-if="visible"  :showActiveBtn="isTodo" @reloadList="getList" :isDaiyue="isDaiyue||isYiyue"></all-detail-dialog>
    </div>
</template>
<script>
    import allWorkflow from "@/api/allWorkflow/index";
    import AllDetailDialog from "../../allWorkflow/AllDetailDialog";
    import eventBus from "@/utils/eventBus";
    import ExtendTable from "@/mixins/ExtendTable";
    import MyLink from '../../../components/MyLink/index'
    export default {
        name:"ListTable",
        components: { MyLink, AllDetailDialog},
        mixins:[ExtendTable],
        props:["hasBadge"],
        provide(){
            return{
                key:this.params.category
            }
        },
        data(){
            return {
                list:[],
                currRow:{},
                visible:false
            }
        },
        computed:{
        },
        created() {
            this.getList();
        },
        methods:{
            getStyle(color){
              return `color: ${color};border: 1px solid ${color};`
            },
            getList(){
                allWorkflow.getList(this.params).then(res=>{
                    this.list = res.data.value;
                    if(this.isTodo || this.isDaiyue){
                        eventBus.$emit("setNumByCategory",{num:res.data.total,category:this.params.category})
                    }
                })
            },
            toHandle(row){
                this.currRow = row;
                this.visible = true
            },
            goto(row) {
                if (row) {
                  //  this.$store.dispatch("tempData/setLinkParams", {documentId: row.app_id});
                    this.$store.dispatch("common/toWorkList", {documentId: row.app_id,category:this.params.category}).then(res=>{
                    this.$router.push({path: row.workflow_info.duty_li_pc});
                  });
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
    @import "style.scss";
    ::v-deep.app-container{
        margin: 0;
        margin-top: 15px;
        border-radius: 3px;

    }
    .con-tille {
        padding: 0px;
        height: 30px;
    }
    .con-list {
        display: flex;
        cursor: pointer;
        transition: 0.4s;
        box-sizing: border-box;
        border-bottom: 1px solid #efefef;

        .line-label {
            border-radius: 3px;
            padding: 0px 5px;
            height: 25px;
            margin: auto 0;
            padding: 4px 10px;
            margin-right: 10px;
        }

        > div:nth-child(2) {
            flex: 1;
            font-size: 16px;
            color: #153389;
            line-height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        > div:nth-child(3) {
            line-height: 50px;
            display: flex;
            justify-content: space-between;

            > div:nth-child(1) {
                font-size: 12px;

                > p:nth-child(2) {
                    color: #666;
                    margin-left: 5px;
                    margin-right: 20px;
                }

                > p:nth-child(3) {
                    color: #999;
                    margin-right: 20px;
                }
            }

            > div:nth-child(2) {
                color: #3e66db;

                > p {
                    padding: 0px 5px;

                    > i {
                        color: #3e66db;
                    }
                }
            }

            > div {
                display: flex;
            }
        }
    }

    .list-content {
        height: calc(100vh - 205px);
        overflow: auto;
    }

    ::v-deep .el-badge {
        cursor: pointer;
    }
</style>
